<script>
	export default {
		// 此处globalData为了演示其作用，不是uView框架的一部分
		globalData: {
			username: '白居易'
		},
		onLaunch() {
			// 1.1.0版本之前关于http拦截器代码，已平滑移动到/common/http.interceptor.js中
			// 注意，需要在/main.js中实例化Vue之后引入如下(详见文档说明)：
			// import httpInterceptor from '@/common/http.interceptor.js'
			// Vue.use(httpInterceptor, app)
			// process.env.VUE_APP_PLATFORM 为通过js判断平台名称的方法，结果分别如下：
			/**
			 * h5，app-plus(nvue下也为app-plus)，mp-weixin，mp-alipay......
			 */
		},
	}
</script>

<style lang="scss">
	@import "uview-ui/index.scss";
	@import "common/demo.scss";

	.mh-form {
		padding: 0 28rpx;

		.mh-form-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 29rpx;

			.mh-form-title-left {
				display: flex;
				align-items: center;

				.mh-form-title-color {
					width: 8rpx;
					height: 30rpx;
					background: #3068E7;
				}

				.mh-form-title-txt {
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
					line-height: 42rpx;
					margin-left: 18rpx;
				}
			}

			.mh-form-title-right {
				line-height: 50rpx;
				background: #D7E0F5;
				border-radius: 25rpx;
				text-align: center;
				font-weight: 500;
				font-size: 26rpx;
				color: #3068E7;
				padding: 0 30rpx;
			}
		}

		.mh-form-card {
			width: 100%;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 0 48rpx;
			margin-top: 29rpx;

			.mh-form-item {
				display: flex;
				align-items: center;
				padding: 35rpx 0;
			}
			
			.mh-form-item-select {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 35rpx 0;
			}

			.mh-form-item-textarea {
				display: flex;
				padding: 35rpx 0;

				/deep/.u-input__textarea {
					padding: 0;
				}
			}

			.mh-form-item-upload {
				padding: 35rpx 0;

				.mh-form-item-upload-box {
					margin-top: 30rpx;
					display: flex;
					flex-wrap: wrap;

					.mh-form-item-upload-box-item {
						width: 150rpx;
						height: 150rpx;
						margin-right: 20rpx;
						margin-bottom: 20rpx;
						position: relative;

						.mh-form-item-upload-box-item-close {
							position: absolute;
							top: -10rpx;
							right: -10rpx;
							z-index: 9;
						}
					}
				}
			}

			.mh-form-item-label {
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				margin-right: 15rpx;
				position: relative;
				
				.question {
					position: absolute;
					top: 0;
					right: 30rpx;
				}
			}

			.width-140 {
				width: 140rpx;
			}

			.width-271 {
				width: 271rpx;
			}

			.width-196 {
				width: 196rpx;
			}

			.width-224 {
				width: 224rpx;
			}

			.border {
				border-bottom: 1rpx solid #E6E6E6;
			}
		}
	}
</style>